<template>
    <div class="content-wrap">
        <div class="content-wrap-top">
            <p class="content-title">数据汇总</p>
            <ul class="content-wrap-top-list">
                <li>
                    <span class="content-list-name">注册用户（人）</span>
                    <div class="content-list-text">{{totalData.registerUser || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">求购用户（人）</span>
                    <div class="content-list-text">{{totalData.buyers || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">采购木耳总金额</span>
                    <div class="content-list-text">{{totalData.blackFungusPurchasedAmount || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">求购数量（头）</span>
                    <div class="content-list-text">{{totalData.buyingQuantity || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">实名用户（人）</span>
                    <div class="content-list-text">{{totalData.realNameUser || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">供货用户（人）</span>
                    <div class="content-list-text">{{totalData.supplyUser || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">采购牛数量（头）</span>
                    <div class="content-list-text">{{totalData.purchasedCattleNum || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">提现金额（元）</span>
                    <div class="content-list-text">{{totalData.withdrawalAmount || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">采购牛用户（人）</span>
                    <div class="content-list-text">{{totalData.purchasingCattleUsers || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">采购木耳用户</span>
                    <div class="content-list-text">{{totalData.purchasingFungusUsers || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">转售数量（头）</span>
                    <div class="content-list-text">{{totalData.resaleCattle || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">提现流水（笔）</span>
                    <div class="content-list-text">{{totalData.cashFlow || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">转售用户（人）</span>
                    <div class="content-list-text">{{totalData.resaleUsers || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">采购牛总金额</span>
                    <div class="content-list-text">{{totalData.cattlePurchasedAmount || 0}}</div>
                </li>
                <li>
                    <span class="content-list-name">供货数量（头）</span>
                    <div class="content-list-text">{{totalData.supplyQuantity || 0}}</div>
                </li>
            </ul>
        </div>

        <div class="empty-div"></div>

        <div class="content-top-box">
            <p class="content-title">数据列表</p>
            <!-- 搜索区域 -->
            <ul class="search-container">
                <li>
                    <span class="search-item-name">查询时间：</span>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions"
                        @change="changeDate">
                    </el-date-picker>
                </li>
                <li>
                    <el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
                    <download-excel
                        class = "export-excel-wrapper"
                        :data = "jsonData"
                        :fields = "jsonFields"
                        v-if="exportBtn"
                        name = "运营数据统计表.xls">
                        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                        <el-button class="search-btn" type="primary" icon="el-icon-download">导出</el-button>
                    </download-excel>
                </li>
            </ul>

            <div class="content-bottom-box">
            <!-- 表格 -->
            <div class="content-form-box">
                <el-table
                    v-loading="loadingFlag"
                    :data="tableData"
                    :height="tableHeight"
                    ref="table"
                    border
                    stripe
                    style="width: 100%"
                >
                    <el-table-column
                        prop="serialNumber"
                        label="序号"
                        width="60"
                        :show-overflow-tooltip="true"
                        fixed
                        >
                    </el-table-column>
                    <el-table-column
                        prop="statisticsDate"
                        label="日期"
                        width="160"
                        :show-overflow-tooltip="true"
                        fixed
                        >
                    </el-table-column>
                    <el-table-column
                        prop="registerUser"
                        label="注册用户(人)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="realNameUser"
                        label="实名用户(人)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="purchasingCattleUsers"
                        label="采购牛用户(人)"
                        :show-overflow-tooltip="true"
                        width="120"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="resaleUsers"
                        label="转售用户(人)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="supplyUser"
                        label="供货用户(人)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="buyers"
                        label="求购用户(人)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="purchasingFungusUsers"
                        label="采购木耳用户(人)"
                        :show-overflow-tooltip="true"
                        width="140"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="cattlePurchasedAmount"
                        label="采购牛总金额(元)"
                        :show-overflow-tooltip="true"
                        width="160"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="blackFungusPurchasedAmount"
                        label="采购木耳总金额(元)"
                        :show-overflow-tooltip="true"
                        width="180"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="purchasedCattleNum"
                        label="采购牛数量(头)"
                        :show-overflow-tooltip="true"
                        width="120"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="resaleCattle"
                        label="转售数量(头)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="supplyQuantity"
                        label="供货数量(头)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="buyingQuantity"
                        label="求购数量(头)"
                        :show-overflow-tooltip="true"
                        width="110"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="withdrawalAmount"
                        label="提现金额(元)"
                        width="110"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="cashFlow"
                        label="提现流水(笔)"
                        width="110"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                </el-table>
            </div>

            <!-- 页码 -->
            <div class="content-Page-container">
                <BaseFormPage 
                    :pagination="pagination"
                    @cFirstPageFn="cFirstPageFn"
                    @cLastPageFn="cLastPageFn"
                    @cJumpPageFn="cJumpPageFn"
                    @cPreFn="cPreFn"
                    @cNextFn="cNextFn"
                    @cRefreshFn="cRefreshFn"
                    >
                </BaseFormPage>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
import BaseFormPage from '@/components/BaseFormPage';
export default {
    components: {
        BaseFormPage
    },
    data() {
        return {
            loadingFlag: false,         //表格数据加载状态
            totalData: {},

            date: '',
            startTime: '',
            endTime: '',

            pageIndex: 1,
            pageSize: 20,
            tableHeight: 200,           //表格初始高度
            tableData: [],              //表格数据
            pagination: {               //分页数据
                loadingFlag: false,     //数据加载状态
                currentPage: 1,         //当前页
                totalPage: 1,           //总页数
                totalNum: 0,            //总条数
                firstNum: 0,            //分页显示起始值
                endNum: 0               //分页显示结束值
            },

            jsonData: [],
            jsonFields: {
                "序号": "index",
                "日期": "statisticsDate",
                "注册用户(人)": "registerUser",
                "实名用户(人)": "realNameUser",
                "采购牛用户(人)": "purchasingCattleUsers",
                "转售用户(人)": "resaleUsers",
                "供货用户(人)": "supplyUser",
                "求购用户(人)": "buyers",
                "采购木耳用户(人)": "purchasingFungusUsers",
                "采购牛总金额(元)": "cattlePurchasedAmount",
                "采购木耳总金额(元)": "blackFungusPurchasedAmount",
                "采购牛数量(头)": "purchasedCattleNum",
                "转售数量(头)": "resaleCattle",
                "供货数量(头)": "supplyQuantity",
                "求购数量(头)": "buyingQuantity",
                "提现金额(元)": "withdrawalAmount",
                "提现流水(笔)": "cashFlow",
            },
            jsonMeta: [
                [
                    {
                        "key": "charset",
                        "value": "utf-8"
                    }
                ]
            ],

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now(); //不可以选择今天之后的日期 
                }
            },

            searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(283) == -1 ? false : true,
            exportBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(284) == -1 ? false : true,
        }
    },
    created() {
        this.getTotalData()
        this.getListData()
    },
    methods: {
        getTotalData() {
            this.$http.get('/statistics/totalData')
                .then((res) => {
                    this.totalData = res.data
                })
        },
        getListData() { //获取列表信息
            this.loadingFlag = true;
            this.pagination.loadingFlag = true;
            let params = {
                startTime: this.startTime,
                endTime: this.endTime,
                pgCt: this.pageIndex,
                pgSz: this.pageSize
            }
            if(!this.date) {
                delete params.startTime
                delete params.endTime
            }

            this.$http.post('/statistics/getByDate', params)
                .then((res) => {
                    if(res.data.records.length > 0) {
                        this.pagination.totalPage = res.data.pages
                        this.pagination.totalNum = res.data.total
                        
                        res.data.records.forEach((item, index) => {
                            //列表下标
                            item.index = index
                            //列表序号
                            item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
                            //无数据处理
                        })
                        this.pagination.firstNum = res.data.records[0].serialNumber
                        this.pagination.endNum = res.data.records[res.data.records.length-1].serialNumber
                    }else{
                        this.pagination.currentPage = 1
                        this.pagination.totalPage = 1
                        this.pagination.totalNum = 0
                        this.pagination.firstNum = 0
                        this.pagination.endNum = 0
                    }
                    this.tableData  = res.data.records;
                }).then(() => {
                    this.tableHeightFn();
                    this.loadingFlag = false;
                    this.pagination.loadingFlag = false;
                    this.getAllListData();
                })
        },
        getAllListData() { //导出数据
            let params = {
                startTime: this.startTime,
                endTime: this.endTime,
                pgCt: 1,
                pgSz: 999999999
            }
            if(!this.date) {
                delete params.startTime
                delete params.endTime
            }

            this.$http.post('/statistics/getByDate', params)
                .then((res) => {
                    if(res.data.records.length > 0) {
                        res.data.records.forEach((item, index) => {
                            item.index = index + 1
                        })
                    }
                    this.jsonData = res.data.records
                })
        },
        tableHeightFn() { //表格高度
            let tableDataLength = this.tableData.length;
            let minHeight = tableDataLength == 0 ? 0 : 80; //根据需求距离底部的高度
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
                if(this.tableData.length <= 0) {
                    this.tableHeight = '60vh'
                }

                // 通过捕获系统的onresize事件触发去改变原有的高度
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
                    self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
                }
            })
        },
        changeDate() {
            if(this.date) {
                this.startTime = this.date[0]
                this.endTime = this.date[1].replace('00:00:00', '23:59:59')
            }else{
                this.startTime = ''
                this.endTime = ''
            }
            this.searchFn()
        },
        searchFn() {
            this.resetPageIndex()
            this.getListData()
        },

        resetPageIndex() { //重置页码
            this.pagination.currentPage = 1;
            this.pageIndex = 1;
        },
        cFirstPageFn(pageNum) { //首页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cLastPageFn(pageNum) { //尾页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cJumpPageFn(pageNum) { //页码跳转
            this.pageIndex = pageNum;
            this.getListData()
        },
        cPreFn(pageNum) { //上一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cNextFn(pageNum) { //下一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        resetParams() { //重置参数
            this.phone = ''
            this.userName = ''
            this.date = ''
            this.startPurchaseTime = ''
            this.endPurchaseTime = ''
            this.purchaseType = ''
            this.detailData = {}
            this.tableData = []
            this.pageIndex = 1
            this.pageSize = 20
            this.pagination = {
                loadingFlag: false,
                currentPage: 1,
                totalPage: 1,
                totalNum: 0,
                firstNum: 0,
                endNum: 0
            }
        },
        cRefreshFn() { //刷新
            this.resetParams()
            this.getListData()
        }
    }
}
</script>

<style lang="scss" scoped>
    .content-wrap-top {
        width: 100%;
        padding: 26px 12px 14px;
        box-sizing: border-box;
        .content-title {
            margin-bottom: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #4572CF;
        }
        .content-wrap-top-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            li {
                display: flex;
                align-items: center;
                margin-right: 10px;
                margin-bottom: 24px;
                .content-list-name {
                    width: 138px;
                    text-align: right;
                    margin-right: 24px;
                }
                .content-list-text {
                    width: 228px;
                    height: 36px;
                    line-height: 36px;
                    padding-left: 36px;
                    border: 1px solid #D0CFCF;
                    font-size: 16px;
                    color: #5D6164;
                }
            }
        }
    }
    .empty-div {
        width: 100%;
        height: 10px;
        background-color: #F2F2F2;
    }
    .content-wrap {
        .content-title {
            margin-bottom: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #4572CF;
        }
        .content-top-box {
            flex-direction: column;
        }
    }
</style>